<template>
    <el-main>
        <div class="header">
            <div class="top">
                <div class="title">{{ staticData?.planName }}</div>
                <div class="back" @click="router.go(-1)">返回</div>
            </div>

            <div class="intro">
                <img class="img" :src="staticData?.creatorAvatar" />
                <div>{{ staticData?.creatorName }}</div>
                <div class="ctime">创建于{{ moment(staticData?.createTime).format('YYYY-MM-DD') }}</div>
            </div>
        </div>
        <div class="conn">
            <DanceV :data="data" v-for="data in detailList" :key="data.id"></DanceV>
        </div>
    </el-main>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import trainingCenterApi from "@/api/training";
import { useRouter } from "vue-router";
import DanceV from "./components/dancev2.vue";
import moment from 'moment'

const router = useRouter();
const detailList = ref<{
    trainingCycleType:string,
    subject:string,
    contentId:string,
    userId:string,
    contentName:string,
    trainingUserCount:number,
    cover:string,
    router:string,
    contentSource:string,
    planId:string,
    id:string,
    status:string
}[]>();
const staticData = ref<{
    planName:string,
    creatorAvatar:string,
    creatorName:string,
    createTime:string
}>();
const getDetailData = async () => {
    try {
        let result = await trainingCenterApi.getDetailData();
        detailList.value = result.data.content;
        staticData.value = result.data.statistics;
    } catch (error) {
        console.log(error);
    }
};
onMounted(() => {
    getDetailData();
});
</script>

<style lang="less" scoped>
.el-main {
    padding: 0;
    overflow-x: hidden;
    .header {
        width: 960px;
        background-color: #fff;
        margin-bottom: 10px;
        color: #111;
        font-size: 14px;
        padding: 28px 30px;
        .top {
            display: flex;
            justify-content: space-between;
            .title {
                font-size: 24px;
            }
            .back{
                cursor: pointer;
            }
        }
        .intro {
            display: flex;
            margin-top: 24px;
            align-items: center;
            height: 28px;
            font-size: 16px;
            .img {
                width: 28px;
                height: 28px;
                margin-right: 10px;
                border-radius: 100%;
                cursor: pointer;
            }
            .ctime {
                font-size: 14px;
                color: #666;
                padding: 0 0 0 20px;
            }
        }
    }
    .conn {
        width: 960px;
        min-height: 720px;
        padding: 10px 30px;
        margin-bottom: 20px;
        background-color: #fff;
    }
}
</style>
